<template>
  <table v-if="s_showByRow" class="mailTable" :style="styleObject">
    <tr v-for="index in rowCount" :key="index">
      <td class="column">{{ tableData[index * 2 - 2].key }}  </td>
      <td>{{ tableData[index * 2 - 2].value }}<span v-if="tableData[index * 2 - 2].key==='订单编号'"><slot name="btn" /></span></td>
      <td class="column">
        {{
          tableData[index * 2 - 1] !== undefined
            ? tableData[index * 2 - 1].key
            : ''
        }}
      </td>
      <td>
        {{
          tableData[index * 2 - 1] !== undefined
            ? tableData[index * 2 - 1].value
            : ''
        }}
      </td>

    </tr>
    <!-- <tr v-if="template">
      <td class="column">
        <slot name="key" />
      </td>
      <td>
        <slot name="value" />
      </td>
    </tr> -->
  </table>
</template>

<script>
export default {
    props: ['tableData', 'tableStyle', 'showByRow', 'template'],
    data() {
        return {
            styleObject: {},
            s_showByRow: true
        }
    },
    computed: {
        rowCount: function() {
            return Math.ceil(this.tableData.length / 2)
        }
    },
    created() {
        this.styleObject = this.tableStyle
        if (this.showByRow !== undefined) {
            this.s_showByRow = this.showByRow
        }
    }
}
</script>
<style>
.mailTable,
.mailTable tr,
.mailTable tr td {
  border: 1px solid #e6eaee;
}
.mailTable {
  font-size: 12px;
  color: #71787e;
  border-collapse:collapse;
}
.mailTable tr td {
  border: 1px solid #e6eaee;
  /* width: 150px; */
  height: 38px;
  line-height: 38px;
  box-sizing: border-box;
  padding: 0 10px;
}
.mailTable tr td.column {
  background-color: #FAFAFA;
  color: #393c3e;
}
</style>
